<template>
    <div class="ethan-skeleton">
        <div class="ethan-skeleton-header" v-if="avatar">
            <span :class="animate?'ethan-skeleton-avatar ethan-has-ani':'ethan-skeleton-avatar'"></span>
        </div>
        <div class="ethan-skeleton-content">
            <h3 :class="'ethan-skeleton-title ' + ethanClass" style="width: 50%;"></h3>
            <ul class="ethan-skeleton-paragraph">
                <li :class="ethanClass" v-for="i in paragraph" :key="i"></li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
  props: {
    "paragraph": {
      type: Number,
      default: 4
    },
    "avatar":{
        type: Boolean,
        default: false
    },
    "animate": {
        type: Boolean,
        default: false
    }
  },
  computed: {
    ethanClass() {
      return this.animate ? "ethan-has-ani" : "ethan-no-ani";
    }
  }
};
</script>

<style lang="less" scoped>
ul,
li {
  list-style: none;
}
.ethan-skeleton {
  display: table;
  width: 100%;
  padding: 20px;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  &-header {
    display: table-cell;
    vertical-align: top;
    padding-right: 16px;
  }
  &-content {
    display: table-cell;
    vertical-align: top;
    width: 100%;
    .ethan-skeleton-title {
      margin-top: 16px;
      height: 16px;
      width: 100%;
    }
    .ethan-skeleton-paragraph {
      margin-top: 16px;
      li {
        height: 16px;
        list-style: none;
        width: 100%;
        margin-top: 16px;
      }
    }
  }
  &-avatar {
    display: inline-block;
    vertical-align: top;
    background: #f2f2f2;
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 50%;
    margin-top: 12px;
  }
}

.ethan-no-ani {
  height: 16px;
  width: 100%;
  margin-top: 16px;
  background: #f2f2f2;
}
.ethan-has-ani {
  animation-name: loading;
  animation-duration: 1.8s;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  background: linear-gradient(90deg, #edeef1 0%, #f6f7f9 50%, #ecdede 100%);
  background-size: 200% 100%;
  background-position: 200% 0;
}
@keyframes loading {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: 0 0;
  }
}
</style>
